<template>
	<Tippy v-if="tip" ref="tip" v-bind="tippyProps" v-on="$listeners">
		<div
			ref="content"
			:class="classes()"
			:style="style">{{content}}<div v-if="!webkit&&inOverflow" :style="ellipsisStyle" class="lexmis_ellipsis">...</div><QResizeObserver :debounce="100" @resize="$_lexmis_resizeFn"/>
		</div>
		<template #title>
			<slot name="title"></slot>
		</template>
		<template #content>
			<slot name="content"></slot>
		</template>
	</Tippy>
	<div
		v-else
		ref="content"
		:class="classes()"
		:style="style">{{content}}<div v-if="!webkit&&inOverflow" :style="ellipsisStyle" class="lexmis_ellipsis">...</div><QResizeObserver :debounce="100" @resize="$_lexmis_resizeFn"/>
	</div>
</template>

<script>
import {QResizeObserver} from 'quasar';
import Tippy from '../tippy';

/**
 * @author 唐国雄
 * 文字省略
 * 属性----------------------
 * :content			内容
 * :line			文字最大行数
 * :overflow		是否已经省略(支出sync修饰符)
 * :bg-color		ie上的省略号背景色
 * :tip				省略时是否显示提示
 * 并继承了Tippy组件的属性,事件
 * 方法----------------------
 * restLineHeight	重新计算lineHeight
 */
const webkit=typeof document.body.style['-webkit-line-clamp']==='string';
let computed;
if(webkit){
	computed={
		$_lexmis_drawListener(){
			return [this.content,this.width,this.line];
		},
		style(){
			const style={'-webkit-line-clamp':this.line};
			if(this.inOverflow){
				style.height=Math.ceil(this.line*this.lineHeightPx)+'px';
			}
			return style;
		},
	};
}else{
	computed={
		$_lexmis_drawListener(){
			return [this.content,this.width,this.line,this.lineHeightPx];
		},
		style(){
			const maxHeight=Math.ceil(this.line*this.lineHeightPx);
			const style={maxHeight:maxHeight+'px'};
			if(this.inOverflow){
				style.height=maxHeight+'px';
			}
			return style;
		},
		ellipsisStyle(){
			return {
				background:`linear-gradient(90deg,transparent,${this.bgColor} 1em,${this.bgColor})`,
			};
		},
	};
}
export default {
	name:'TextEllipsis',
	components:{
		QResizeObserver,
		Tippy,
	},
	inheritAttrs:false,
	props:{
		//显示内容
		content:String,
		//最大行数
		line:{
			type:Number,
			default:1
		},
		//是否已经省略
		overflow:Boolean,
		//ie上的省略号背景色
		bgColor:{
			type:String,
			default:'#fff',
		},
		//是否省略时显示提示
		tip:Boolean,
		lineHeight:[String,Number],
	},
	data(){
		return {
			webkit,
			width:0,
			inOverflow:false,
			lineHeightPx:0,
		};
	},
	computed:{
		...computed,
		tippyProps(){
			const prop=Object.assign({
				content:this.content
			},this.$attrs);
			if(prop.disable==null){
				prop.disable=!this.inOverflow;
			}
			return prop;
		},
	},
	watch:{
		$_lexmis_drawListener:'$_lexmis_draw',
		lineHeight:'restLineHeight',
	},
	created(){
		this.$watch(function(){
			return this.inOverflow!==this.overflow;
		},function(val){
			if(val){
				this.$emit('update:overflow',this.inOverflow);
			}
		},{
			immediate:true
		});
	},
	mounted(){
		this.restLineHeight();
	},
	methods:{
		type(){
			if(this.line<=1){
				return 'cssTextOverflow';
			}else if(webkit){
				return 'cssLineClamp';
			}
			return 'js';
		},
		classes(){
			return `lexmis-TextEllipsis lexmis--type-${this.type()}`;
		},
		$_lexmis_draw(){
			this.$nextTick(function(){
				const el=this.$refs.content;
				if(this.type()==='cssTextOverflow'){
					this.inOverflow=el.scrollWidth>el.offsetWidth;
				}else{
					const line=Math.round(el.scrollHeight/this.lineHeightPx);
					this.inOverflow=line>this.line;
				}
			});
		},
		$_lexmis_resizeFn({width}){
			if(this.width!==width){
				this.width=width;
			}
		},
		restLineHeight(){
			const lineHeight=this.lineHeight;
			if(lineHeight){
				if(typeof lineHeight==='number'){
					if(this.$el){
						const style=getComputedStyle(this.$el);
						this.lineHeightPx=Math.ceil(lineHeight*parseFloat(style.fontSize));
					}else{
						this.lineHeightPx=0;
					}
				}else{
					this.lineHeightPx=Math.ceil(parseFloat(lineHeight));
				}
			}else{
				const style=getComputedStyle(this.$el);
				this.lineHeightPx=parseFloat(style.lineHeight);
			}
		},
	}
};
</script>

<style lang="scss">
.lexmis-TextEllipsis{
	position:relative !important;
	overflow:hidden !important;
	word-break:break-all !important;
	&.lexmis--type-cssTextOverflow{
		white-space:nowrap;
		text-overflow:ellipsis;
	}
	&.lexmis--type-cssLineClamp{
		display:-webkit-box;
		-webkit-box-orient:vertical;
	}
	>.lexmis_ellipsis{
		position:absolute;
		bottom:0;
		right:0;
		padding-left:1em;
	}
}
</style>
